<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-19 flex v-align-c">
      <span></span>
      <i>热搜推荐</i>
    </h2>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">热词设置</h3>
      </div>
      <div v-if="details.wordsList" class="border-box pad-t-3">
        <div v-for="(item, index) in details.wordsList" :key="'btns-list-' + index">
          <div class="link-list-box">
            <div class="border-box btns-form flex v-align-c">
              <div class="pad-t-5 pad-b-7 flex-item">
                <div class="font-color-6 font-14 pad-b-3">热词名称</div>
                <el-form-item class="none-mar-b pad-b-10">
                  <el-input placeholder="最多5个字" class="mini-s-input" maxlength="5" v-model="item.wordsName"></el-input>
                </el-form-item>
                <div class="font-color-6 font-14 pad-b-15">文字颜色</div>
                <el-form-item class="none-mar-b pad-b-10 mar-t--4">
                  <div class="font-14 v-align-c">
                    <el-color-picker 
                      v-model="item.wordsColor"
                      @active-change="activecolorChange(item, 'wordsColor', '#ffffff',$event)"
                      @change="colorChange(item, 'wordsColor', '#ffffff',$event)"
                      :predefine="predefineColors"
                      class="color-sel" />
                    <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="item.wordsColor" @change="iptColorChange(details, 'wordsColor', '#ffffff',$event)"></el-input>
                    <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'wordsColor', '#ffffff')">重置</el-button>
                  </div>
                </el-form-item>
                <div class="font-color-6 font-14 pad-b-15">跳转地址</div>
                <el-form-item class="none-mar-b pad-b-10 mar-t--4">
                  <div class="mini-sbar-input cursor-p" :class="item.linkRemark ? '' : 'default-sbar-input'"
                    @click="linkLayer(item)">{{ item.linkRemark ? item.linkRemark : '请选择链接' }}</div>
                </el-form-item>
              </div>
            </div>
            <div class="btn-edit-del selected">
              <div class="btn-del" @click="remove(index)">删除</div>
            </div>
          </div>
        </div>
        <div class="add-border-box mar-b-19" v-if="details.wordsList.length < 5" @click="addBorderBox">
          <span>+</span>
          <span>添加</span>
          <span>{{details.wordsList.length}}/5</span>
        </div>
      </div>
      <div class="mar-l--25 pad-b-15 mar-t--28">
        <h3 class="pancel-s-title">颜色样式</h3>
      </div>
      <div class="border-box near-box">
        <div>
          <h4>标签颜色</h4>
          <div class="mar-t-3 mar-b-5">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="details.propMap.wordsBackground"
                  @active-change="activecolorChange(details, 'wordsBackground', '#ffffff',$event)"
                  @change="colorChange(details, 'wordsBackground', '#ffffff',$event)"
                  :predefine="predefineColors"
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.wordsBackground" @change="iptColorChange(details, 'wordsBackground', '#ffffff',$event)"></el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'wordsBackground', '#ffffff')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="border-box near-box">
        <div>
          <h4>标签透明度</h4>
          <div class="mar-t-3 mar-b-5">
            <el-form-item>
              <div class="flex font-12">
                <el-slider v-model="details.propMap.opacity" class="flex-item" :max="100"></el-slider>
                <el-input class="mar-l-20 color-sel-input" :max="100" placeholder="请输入内容" v-model="details.propMap.opacity" @input="marginChange(details, 'opacity', $event)">
                  <template slot="append">%</template>
                </el-input>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>

    <!-- 链接设置弹层 -->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <!-- appType 13 为主播小程序 -->
      <component-link-layer v-if="appType !== 13" :appType="appType" v-on:selectLink="setLinkTemp"></component-link-layer>
      <component-anchor-link-layer v-else v-on:selectLink="setLinkTemp"></component-anchor-link-layer>
    </el-dialog>

  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getToken } from '@/utils/auth'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import ComponentAnchorLinkLayer from './../ComponentAnchorLinkLayer'

  export default {
    components: {
      ComponentLinkLayer,
      ComponentAnchorLinkLayer
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          propMap: {
            linkType: '',
            linkParams: '',
            linkRemark: ''
          },
          wordsList: []
        },
        fullScreenLoading: null,
        pictureType: '1',
        predefineColors: [],
        // 定义链接选择器基础数据开始
        linkSetVisible: false,
        link: {},
        linkTemp: {}
        // 定义链接选择器基础数据结束
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.details = this.details1
      this.$set(this.details.propMap, 'opacity', this.details.propMap.opacity ? this.details.propMap.opacity * 1 : 100)
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsRecommendSearch', function(details) {
        that.details = details
        that.$set(that.details.propMap, 'opacity', details.propMap.opacity ? details.propMap.opacity * 1 : 100)
      })
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    methods: {
      linkLayer(item) {
        this.link = item
        this.linkSetVisible = true
      },
      setLinkTemp(item) {
        Object.assign(this.linkTemp, item)
        this.setLink()
      },
      setLink() {
        Object.assign(this.link, this.linkTemp)
        this.linkSetVisible = false
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          propMap: {},
          wordsList: []
        }
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj.propMap[key] = e
        } else {
          obj.propMap[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj.propMap[key] = defaultColor
      },
      marginChange(obj, key, e) {
        // 滑块输入框触发事件
        if (this.$utils.isNumber(e)) {
          if (e * 1 > 100) {
            obj.propMap[key] = 100
          } else {
            obj.propMap[key] = e * 1
          }
        } else {
          obj.propMap[key] = 0
        }
      },
      addBorderBox() {
        if (this.details.wordsList.length < 5) {
          const addObj = {
            wordsId: '',
            wordsName: '',
            wordsColor: '#ffffff',
            linkType: '',
            linkParams: ''
          }
          this.details.wordsList.push(addObj)
          const changeData = this.details.wordsList
          this.$delete(this.details, 'wordsList')
          this.$set(this.details, 'wordsList', changeData)
        }
      },
      remove(index) {
        this.details.wordsList.splice(index, 1)
      }
    }
  }
</script>
<style lang="less" scoped>
.add-border-box{
  border: 1px dashed #dee5ed;
  color: #9a9a9a;
}
.link-list-box{
  position: relative;
  /deep/ .el-input__inner{
    background: #fff!important;
  }
  /deep/ .el-color-picker__color{
    border: 1px solid #e0e5ea;
  }
  .mini-sbar-input{
    background: #fff!important;
  }
  .border-box{
    margin-bottom: 15px;
    background: #f6f7fb;
    border-radius: 0;
  }
  .btn-edit-del {
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    right: -6px;
    top: -6px;
    display: block;
    z-index: 90;
    font-size: 14px;
    text-align: right;
    display: none;
    &.selected{
      display: block;
    }
  }
  .btn-edit-del > div {
    width: 16px;
    height: 16px;
    display: inline-block;
    text-indent: -100em;
    text-align: left;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    position: relative;
    z-index: 11;
    background: url('@/../../../../../../assets/images/icons-close-2.png') no-repeat;
    background-size: 16px 16px;
  }
}
</style>
